<template>
  <xn-dialog custom-class="rich-edit-dialog" title="高级编辑" :visible.sync="selfVisible" @close="onDialogHide">
    <div class="details-content">
      <tinymce-editor height="560" v-model="selfContent" auto-upload-base64></tinymce-editor>
    </div>
    <div class="footer" slot="footer">
      <el-button type="default" @click="selfVisible = false">取消</el-button>
      <el-button type="primary" @click="onEditorOk">确定</el-button>
    </div>
  </xn-dialog>
</template>

<script>
import XnDialog from '../xnDialog.vue'
import TinymceEditor from '../TinymceEditor.vue'

export default {
  components: {
    XnDialog,
    TinymceEditor,
  },
  props: {
    visible: {
      type: Boolean,
    },
    content: {
      type: String,
    },
  },
  data() {
    return {
      selfVisible: false,
      selfContent: '',
    }
  },
  watch: {
    visible(newValue) {
      this.selfVisible = newValue
      if (newValue) {
        this.selfContent = this.content
      }
    },
  },
  methods: {
    onDialogHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
    onEditorOk() {
      if (this.selfContent !== this.content) {
        this.$emit('updated', this.selfContent)
        this.$emit('update:content', this.selfContent)
      }
      this.onDialogHide()
    },
  },
}
</script>

<style lang="scss" scoped>
.rich-edit-dialog {
  ::v-deep &.el-dialog {
    flex-direction: column;
    position: relative;
    height: 720px;
    width: 1100px !important;
  }
  .details-content {
    height: 100%;
    padding-top: 8px;
  }
}
</style>
